<!--
 * @Author: Mr.Sen
 * @LastEditTime: 2021-02-20 23:15:09
 * @Description: 
 * @Website: https://grimoire.cn
 * @Copyright (c) Mr.Sen All rights reserved.
-->
<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>{{pageName}}</title>
	<link rel="icon" href="/static/img/icon.png">
	<link rel="stylesheet" href="/static/css/root.css">
	<link rel="stylesheet" href="//at.alicdn.com/t/font_2336002_o2przpqscb.css">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<style>
		::selection {
			/* background: orange; */
			background-color: #95e1d3;
			color: #ffffff;
			transition: all .2s;
		}

		::-webkit-scrollbar {
			width: 8px;
			height: 4px;
		}

		::-webkit-scrollbar-track {
			background: #f6f6f6;
			border-radius: 4px;
		}

		::-webkit-scrollbar-thumb {
			background: #aaa;
			border-radius: 2px;
		}

		::-webkit-scrollbar-thumb:hover {
			background: #747474;
		}

		::-webkit-scrollbar-corner {
			background: #f6f6f6;
		}
	</style>
	<!-- darkMOd -->
	<style>
		:root {
			--background: #ffffff;
			--textColor: #000000;

			--background1: #f7f7f7;
			--background2: #ebebeb;

			--shadow: #cccccc;
		}
	</style>
</head>

<body>
	<header class="nav">
		<!-- 顶部导航栏  大于768px可见-->
		<div class="navLeft">
			<a href="/" id="avatar">HeyDoc</a>
			<div class="showMsg">返回首页</div>
			<a href="/user" class="links iconfont icon-yonghu"> 用户</a>
			<a href="/archive" class="links iconfont icon-guidang"> 归档</a>
			<a href="/about" class="links iconfont icon-guanyu1"> 关于</a>
			<a href="/editor/?edit={{docId}}&editMeta={{metaId}}" class="links iconfont icon-pan_icon" target="_blank"> 笔记</a>
		</div>
		<div class="navRight">
			<div class="search searchbar">
				<div class="form">
					<input type="text" placeholder="搜索从这里开始...">
					<button type="submit"></button>
				</div>
			</div>
		</div>
	</header>
	<!-- 最外层容器 内部包含菜单栏和main -->
	<div class="containerOfAll">
		<!-- 移动端显示的菜单栏 -->
		<a class="toggleBtn-navigator" href="javascript:displayMenu();">Menu</a>
		<nav class="navigation-bar-mobile">
			<a href="/">
				<img src="{{avatar}}" height="100px" width="100px">
				<!-- <img src="img/img.png" height="100px" width="100px"> -->
			</a>
			<div class="search searchbar" style="padding-right: 0;">
				<div class="form">
					<input type="text" placeholder="搜索从这里开始...">
					<button type="submit"></button>
				</div>
			</div>
			<ul>
				<li class="item">
					<a href="/" class="iconfont icon-zhuye"> 首页</a>
				</li>
				<li class="item">
					<a href="/user" class="iconfont icon-yonghu"> 用户</a>
				</li>
				<li class="item">
					<a href="/editor/?edit={{docId}}&editMeta={{meta}}" class="iconfont icon-pan_icon" target="_blank"> 笔记</a>
				</li>
				<li class="item">
					<a href="/archive" class="iconfont icon-guidang"> 归档</a>
				</li>
				<li class="item">
					<a href="/about" class="iconfont icon-guanyu1"> 关于</a>
				</li>
			</ul>
		</nav>
		<div class="body">
			<!-- 这里显示用户信息 -->
			{% block userInfo %}
			{% endblock %}
			<main>
				<!-- 这里放置主要内容 -->
				<style type="text/css">
					.subContent {
						display: grid;
						width: calc(45vw);
						margin: 0 auto;
						min-width: 750px;
						grid-template-columns: 1fr 1fr;
					}

					@media only screen and (max-width:768px) {
						.subContent {
							display: grid;
							width: 90vw;
							margin: 0 auto;
							grid-template-columns: 1fr;
							min-width: 0px;
						}
					}
				</style>
				{% block mainbody %}
				{% endblock %}
			</main>
			<footer>
				<small>Copyright 2021 © <a href="https://grimoire.cn">NorthCityChen</a></small>
				<small>Powered by Django | 备案信息</small>
			</footer>
		</div>
	</div>
	<script src="/static/js/root.js" type="text/javascript" charset="utf-8"></script>
	<script>
	</script>
</body>

</html>